<template>
  <div class="test-container">
    <h2>用户信息测试页面</h2>
    
    <div class="info-section">
      <h3>当前用户信息</h3>
      <div class="info-item">
        <strong>用户ID:</strong> {{ userInfo.userId || '未获取到' }}
      </div>
      <div class="info-item">
        <strong>用户名:</strong> {{ userInfo.userName || '未获取到' }}
      </div>
      <div class="info-item">
        <strong>Token:</strong> {{ userInfo.token ? '已设置' : '未设置' }}
      </div>
    </div>

    <div class="storage-section">
      <h3>存储状态</h3>
      <div class="info-item">
        <strong>localStorage userId:</strong> {{ storageInfo.userId }}
      </div>
      <div class="info-item">
        <strong>localStorage userName:</strong> {{ storageInfo.userName }}
      </div>
      <div class="info-item">
        <strong>localStorage token:</strong> {{ storageInfo.token ? '已设置' : '未设置' }}
      </div>
      <div class="info-item">
        <strong>userState:</strong> {{ storageInfo.userState }}
      </div>
    </div>

    <div class="actions">
      <button @click="testWebSocketConnection" class="test-btn">
        测试WebSocket连接
      </button>
      <button @click="refreshInfo" class="refresh-btn">
        刷新信息
      </button>
      <button @click="goToLogin" class="login-btn">
        去登录页面
      </button>
    </div>

    <div v-if="wsStatus" class="ws-status">
      <h3>WebSocket状态</h3>
      <div class="status-item">
        <strong>连接状态:</strong> {{ wsStatus }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentUserInfo, initializeUserStore } from '@/utils/auth'
import { createChatConnection } from '@/utils/websocket-manager'

const userInfo = ref({})
const storageInfo = ref({})
const wsStatus = ref('')

// 获取存储信息
const getStorageInfo = () => {
  try {
    storageInfo.value = {
      userId: uni.getStorageSync('userId') || '未设置',
      userName: uni.getStorageSync('userName') || '未设置',
      token: uni.getStorageSync('token') || '未设置',
      userState: uni.getStorageSync('userState') || '未设置'
    }
  } catch (error) {
    console.error('获取存储信息失败:', error)
  }
}

// 刷新用户信息
const refreshInfo = () => {
  // 初始化用户store
  initializeUserStore()
  
  // 获取当前用户信息
  const currentUserInfo = getCurrentUserInfo()
  userInfo.value = currentUserInfo || {}
  
  // 获取存储信息
  getStorageInfo()
  
  console.log('用户信息已刷新:', userInfo.value)
  console.log('存储信息:', storageInfo.value)
}

// 测试WebSocket连接
const testWebSocketConnection = () => {
  if (!userInfo.value.userId) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 2000
    })
    return
  }

  wsStatus.value = '正在连接...'
  
  try {
    const manager = createChatConnection(1, {
      onOpen: () => {
        wsStatus.value = '连接成功'
        console.log('WebSocket连接成功')
      },
      onError: (error) => {
        wsStatus.value = '连接失败: ' + error.message
        console.error('WebSocket连接失败:', error)
      },
      onClose: (event) => {
        wsStatus.value = '连接已关闭'
        console.log('WebSocket连接关闭:', event)
      }
    })
    
    if (!manager) {
      wsStatus.value = '创建连接失败'
    }
  } catch (error) {
    wsStatus.value = '连接错误: ' + error.message
    console.error('WebSocket连接错误:', error)
  }
}

// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

onMounted(() => {
  refreshInfo()
})
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.info-section, .storage-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.info-item {
  margin: 10px 0;
  padding: 5px 0;
}

.actions {
  margin: 20px 0;
}

.test-btn, .refresh-btn, .login-btn {
  margin: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.test-btn {
  background-color: #007bff;
  color: white;
}

.refresh-btn {
  background-color: #28a745;
  color: white;
}

.login-btn {
  background-color: #dc3545;
  color: white;
}

.ws-status {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #007bff;
  border-radius: 8px;
  background-color: #e7f3ff;
}

.status-item {
  margin: 10px 0;
  padding: 5px 0;
}
</style> 